<template>
	<view class="tab-page friend">
		<!-- <nav-header :show-right="false" title="通讯录">
			<template v-slot:left>
				<view class="nav-search">
					<uni-search-bar v-model="searchText" cancelButton="none" placeholder="搜索"></uni-search-bar>
				</view>
			</template>
		</nav-header> -->
		<up-navbar :auto-back="false" title-width="200" placeholder bgColor="transparent" :fixed="false">
			<template v-slot:left>
				<text class="title">通讯录</text>
			</template>
		</up-navbar>

		<view style="width: 100%;">
			<view class="search">
				<up-search placeholder="搜索" v-model="searchText" :clearabled="true" :showAction="false"
					bg-color="#ffffff" search-icon-color="#474a52" placeholder-color="#82868d" height="40"></up-search>
			</view>
		</view>

		<view class="">
			<!-- <up-cell-group style="margin-bottom: 0;">
				<up-cell size="large" title="通知" is-link url="/pageSubOne/notice/notice">
					<template #icon>
						<svg-icon icon="通知" :width="64" style="margin: 0 16rpx 0 0;"></svg-icon>
					</template>
				</up-cell>
				<up-cell size="large" title="群聊" is-link url="/pageSubOne/group/group">
					<template #icon>
						<svg-icon icon="群聊" :width="64" style="margin-right: 16rpx;"></svg-icon>
					</template>
				</up-cell>
				<up-cell size="large" title="友商群" is-link url="/pageSubOne/group/group-business/group-business">
					<template #icon>
						<svg-icon icon="友商群" :width="64" style="margin-right: 16rpx;"></svg-icon>
					</template>
				</up-cell>
				<up-cell size="large" title="友商" is-link url="/pageSubOne/friend/friend-business">
					<template #icon>
						<svg-icon icon="友商" :width="64" style="margin-right: 16rpx;"></svg-icon>
					</template>
				</up-cell>
			</up-cell-group> -->
			<list-contacts type="function" status="contact" :List="friendList" :showRight="false"></list-contacts>
		</view>
		<view class="friend-tip" v-if="friends.length == 0">
			<up-empty mode="data" text="暂无好友">
			</up-empty>
		</view>
		<view class="friend-items" v-else>
			<up-index-list :index-list="friendIdx" customNavHeight="150">
				<template v-for="(friends, i) in friendGroups">
					<up-index-item>
						<up-index-anchor :text="friendIdx[i] == '*' ? '在线' : friendIdx[i]"
							bgColor="#ffffff"></up-index-anchor>
						<view v-for="(friend, idx) in friends" :key="idx">
							<friend-item :friend="friend" :source-type="0"></friend-item>
						</view>
					</up-index-item>
				</template>
			</up-index-list>
		</view>
		
		<!-- #ifdef APP-PLUS -->
		<view>
			<custom-tabbar :selected="2" :friend="unreadCount"></custom-tabbar>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		pinyin
	} from 'pinyin-pro';

	export default {
		data() {
			return {
				searchText: '',
				countNum: 0, //统计通知数量

			}
		},
		methods: {
			refreshUnreadBadge() {
				if (this.unreadCount > 0) {
					uni.setTabBarBadge({
						index: 2,
						text: this.unreadCount + ""
					})
				} else {
					uni.removeTabBarBadge({
						index: 2,
						complete: () => {}
					})
				}
			},
			onAddNewFriends() {
				uni.navigateTo({
					url: "/pageSubOne/friend/friend-add"
				})
			},
			firstLetter(strText) {

				// 使用pinyin-pro库将中文转换为拼音11
				let pinyinOptions = {
					toneType: 'none', // 无声调
					type: 'normal' // 普通拼音
				};
				let pyText = pinyin(strText, pinyinOptions);
				return pyText[0];
			},
			isEnglish(character) {
				return /^[A-Za-z]+$/.test(character);
			},
			getUser() {
				this.$http({
					url: "/friend/findFriendByType/0",
					method: "GET"
				}).then((data) => {
					// console.log(data)
					console.log(this.friendStore.friends)
				})
			},
			// getNumber() {
			// 	this.$http({
			// 		url: "/systemMessage/findUnReadSystemMessage",
			// 		method: "GET"
			// 	}).then((data) => {
			// 		console.log(data)
			// 		let friend = data['55']
			// 		let group = data['54']
			// 		let system = data['56']
			// 		if (friend == undefined || friend == null || friend == "undefined") {
			// 			friend = 0
			// 		}
			// 		if (group == undefined || group == null || group == "undefined") {
			// 			group = 0
			// 		}
			// 		if (system == undefined || system == null || system == "undefined") {
			// 			system = 0
			// 		}
			// 		this.countNum = friend + group + system
			// 		console.log(this.countNum)
			// 	})
			// }
		},
		computed: {
			unreadCount() {
				let count = 0;
				count = this.noticeStore.sum
				return count;
			},
			friendList() {
				return [{
						icon: "通知",
						message: "通知",
						path: "/pageSubOne/notice/notice",
						value: this.unreadCount
					},
					{
						icon: "群聊",
						message: "群聊",
						path: "/pageSubOne/group/group"
					},
					{
						icon: "友商群",
						message: "友商群",
						path: "/pageSubOne/group/group-business/group-business"
					}, {
						icon: "友商",
						message: "友商",
						path: "/pageSubOne/friend/friend-business"
					},
					{
						icon: "allnr-diaad",
						message: "友星缘助手",
						path: "/pageSubOne/friend/friend-helper"
					}
				]
			},
			friends() {
				const friends = this.friendStore.friends.filter(item => item.friendType == 0)
				return friends;
			},
			friendGroupMap() {
				// 按首字母分组
				let groupMap = new Map();
				this.friends.forEach((f) => {
					if (this.searchText && !f.nickName.includes(this.searchText)) {
						return;
					}
					let letter = this.firstLetter(f.nickName).toUpperCase();
					// 非英文一律为#组
					if (!this.isEnglish(letter)) {
						letter = "#"
					}
					if (f.online) {
						letter = '*'
					}
					if (groupMap.has(letter)) {
						groupMap.get(letter).push(f);
					} else {
						groupMap.set(letter, [f]);
					}
				})
				// 排序
				let arrayObj = Array.from(groupMap);
				arrayObj.sort((a, b) => {
					// #组在最后面
					if (a[0] == '#' || b[0] == '#') {
						return b[0].localeCompare(a[0])
					}
					return a[0].localeCompare(b[0])
				})
				groupMap = new Map(arrayObj.map(i => [i[0], i[1]]));
				return groupMap;
			},
			friendIdx() {
				return Array.from(this.friendGroupMap.keys());
			},

			friendGroups() {
				return Array.from(this.friendGroupMap.values());
			}
		},
		watch: {
			unreadCount(newCount, oldCount) {
				this.refreshUnreadBadge();
			},
		},
		onShow() {
			this.friendStore.loadFriend()
			// this.noticeStore.loadNotice()
			// this.getUser()
			// this.getNumber()
			
			console.log(this.unreadCount)
			this.refreshUnreadBadge();
		}
	}
</script>

<style lang="scss" scoped>
	.friend {
		position: relative;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		// "u-transition u-fade-enter-to u-fade-enter-active"
		// :deep(.u-index-list){
		// 	position: relative !important;
		// }
		
		// :deep(.u-index-list__letter){
		// 	position: absolute !important;
		// 	right: 0 !important;
		// 	top: 150px !important;
		// }
		
		// :deep(.u-transition.u-fade-enter-to.u-fade-enter-active){
		// 	position: absolute !important;
		// 	right: 40px !important;
		// 	// margin-top: -20px !important;
		// 	// top: 120px !important;
		// }
		
		// :deep(.u-transition.u-fade-leave-to.u-fade-leave-active){
		// 	position: absolute !important;
		// 	right: 40px !important;
		// }

		.title {
			font-size: 40rpx;
			font-weight: bold;
			padding: 0 3px;
		}

		.search {
			padding-bottom: 20rpx;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 100%;
			// margin: 0 auto;
			padding: 0 32rpx;

			:deep(.u-search__content) {
				border-radius: 30px !important;
				height: 72rpx;
			}

			:deep(.u-search) {
				border-radius: 30px !important;
				border: 1rpx solid $gray-200;
			}
		}

		// .nav-search {
		// 	width: 100px;
		// 	height: 100%;
		// 	border-radius: 15rpx;

		// 	:deep(.uni-searchbar) {
		// 		padding: 0 !important;
		// 		border-radius: 15rpx;
		// 	}
		// }

		// .nav-bar {
		// 	padding: 2rpx 10rpx;
		// 	display: flex;
		// 	align-items: center;
		// 	background-color: white;

		// 	.nav-search {
		// 		flex: 1;
		// 	}

		// 	.nav-add {
		// 		cursor: pointer;
		// 	}
		// }

		.friend-txl {
			width: 100%;

			.txl {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.txl-left {
					display: flex;
					align-items: center;

					text {
						margin-left: 40rpx;
					}

					.txl-img {
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

			.txl3 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 20rpx 20rpx 10rpx;

				.txl-left {
					display: flex;
					align-items: center;

					text {
						margin-left: 30rpx;
					}

					.txl-img3 {
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}

		.friend-items {
			flex: 1;
			padding: 0;
			/* #ifdef APP-PLUS */
			padding-bottom: 90px;
			/* #endif */
			border: #dddddd solid 1px;
			// overflow: hidden;
			// position: relative;

			.scroll-bar {
				height: 100%;
			}
		}
	}
</style>